@include b('form-anchor-point') {
  position: relative;
  height: 100%;
  padding: 0 20px;
  overflow: auto;
  background-color: #edf0f4;

  .#{bem('control-form')}.#{bem('control-form')} {
    height: auto;
  }

  &.isCollapse {
    padding: 0 20px 0 2px;
  }

  .#{bem(crm-page-tab-item)} {
    .#{bem(form-group)}:not(.#{bem('form-group-collapse','','disable-close')}) {
      @keyframes form-anchor-point-hide {
        0% {
          opacity: 0.5;
        }

        100% {
          opacity: 1;
          transform: rotate(90deg);
        }
      }

      @keyframes form-anchor-point-show {
        0% {
          opacity: 0.5;
        }

        100% {
          opacity: 1;
          transform: rotate(0deg);
        }
      }

      .#{bem('form-group-header')} {
        margin: 0;
        cursor: pointer;

        .#{bem('form-group','caption')} {
          font-weight: normal;
        }

        .#{bem('form-group-header', 'left')} {
          position: relative;
          padding-left: getCssVar('spacing', 'base');
          transition: 0.5s;

          &::after {
            position: absolute;
            top: calc(50% - 4px);
            left: calc(#{getCssVar('spacing', 'base')} - 6px);
            display: inline-block;
            width: 0;
            height: 0;
            visibility: hidden;
            content: '';
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 7px solid #313949;
          }
        }

        &:hover {
          .#{bem('form-group-header', 'left')} {
            padding-left: calc(
              #{getCssVar('spacing', 'base')} + #{getCssVar('spacing', 'base')}
            );

            &::after {
              left: getCssVar('spacing', 'base');
              visibility: visible;
              transition: 0.5s;
              animation: 0.3s ease-in-out forwards form-anchor-point-hide;
            }
          }
        }

        .#{bem('form-group-header', 'right')} {
          ion-icon[name='caret-down-sharp'],
          ion-icon[name='caret-forward-sharp'] {
            display: none;
          }
        }
      }

      .#{bem('form-group')} {
        &.is-collapse {
          .#{bem('form-group-header')} {
            .#{bem('form-group-header', 'left')} {
              &::after {
                transform: rotate(-90deg);
              }
            }

            &:hover {
              .#{bem('form-group-header', 'left')} {
                &::after {
                  animation: 0.3s ease-in-out forwards form-anchor-point-show;
                }
              }
            }
          }
        }
      }
    }
  }

  .#{bem('form-group','caption')} {
    font-size: 18px;
    font-weight: 400;
  }
}

@include b('form-anchor-point-form-view') {
  .#{bem('control-captionbar-caption')} {
    padding-left: 0;

    &::before {
      display: none;
    }
  }
}

@include b('form-anchor-point-content') {
  .#{bem('control-captionbar-caption')} {
    z-index: 1;
    overflow: unset;
  }
}

@include b('form-anchor-point-item') {
  padding-top: 15px;

  > .#{bem('view')} {
    border: 1px solid #d7e2ed;
    border-radius: 6px;
    box-shadow: 0 3px 4px 0 #00000008;
  }

  &:last-of-type {
    padding-bottom: 15px;
  }
}

.isShowHighLight {
  .ibiz-control-captionbar-caption {
    &::after {
      position: absolute;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      content: '';
      background-color: #f7eec1;
      border-radius: 2px;
      box-shadow: 
      /* 上下1px的阴影 */
      0 1px 0 0 #f7eec1, 
      0 -1px 0 0 #f7eec1,
      /* 左右3px的阴影，这里使用了稍微不同的策略来模拟宽度 */
      3px 0 0 0 #f7eec1, 
      -3px 0 0 0 #f7eec1,
      /* 为了模拟角落的过渡，可以尝试添加轻微的模糊效果，但这仍然是一种近似方法 */
      3px 1px 0 0 rgb(247 238 193 / 50%), 
      -3px 1px 0 0 rgb(247 238 193 / 50%),
      3px -1px 0 0 rgb(247 238 193 / 50%), 
      -3px -1px 0 0 rgb(247 238 193 / 50%);
    }
  }

  .#{bem('form-group-header','left')} {
    width: auto;
  }

  .#{bem('form-group','caption',)} {
    position: relative;
    z-index: 1;
    overflow: visible;

    &::after {
      position: absolute;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      content: '';
      background-color: #f7eec1;
      border-radius: 2px;
      box-shadow: 
      /* 上下1px的阴影 */
      0 1px 0 0 #f7eec1, 
      0 -1px 0 0 #f7eec1,
      /* 左右3px的阴影，这里使用了稍微不同的策略来模拟宽度 */
      3px 0 0 0 #f7eec1, 
      -3px 0 0 0 #f7eec1,
      /* 为了模拟角落的过渡，可以尝试添加轻微的模糊效果，但这仍然是一种近似方法 */
      3px 1px 0 0 rgb(247 238 193 / 50%), 
      -3px 1px 0 0 rgb(247 238 193 / 50%),
      3px -1px 0 0 rgb(247 238 193 / 50%), 
      -3px -1px 0 0 rgb(247 238 193 / 50%);
    }
  }
}
